import React from 'react'
import { SearchBar, WhiteSpace} from 'antd-mobile';
import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom"
import { Popover, NavBar} from 'antd-mobile';
import sousuo from "./img/搜索.png"
import fanhui from "./img/返回.png"
import Css from './style/common.module.css'
import Searchindex from './saerchindex'
import Detail from './detail/index.js'
import Findsong from '../My/Findsong'
import Morevideo from './detail/video/detaill'
const Item = Popover.Item;

class SearchBarExample extends React.Component {
    constructor(){
        super()
        this.state={
            visible:false,
            selected: '',
            // value:'',
            val:'',
            searchSuggest:[],
            aarr:[]
        }
    }
    componentWillMount(){
        // ************获取localStorage************
        let histor=localStorage.getItem('history')
        if(histor!=null){
            var historr=histor.split(",");
            this.setState({
                aarr:historr
            })
        }
    }
    componentDidMount() {
        //打开页面自动获取光标
        this.autoFocusInst.focus();
    }
    onChange= (value) => {
        if(!value){
            this.setState({
                visible:false
            })
            return
        }
        else if(value==111){
            this.setState({
                val:value,
                // value,
                searchSuggest:[]
            })
            return
        }
        fetch(`http://106.12.79.128:666/search/suggest?keywords=${value}&type=mobile`)
        .then(body=>body.json())
        .then(res=>{
            if(res.result.allMatch){
                this.setState({
                    visible: true,
                    val:value,
                    // value,
                    searchSuggest:res.result.allMatch
                })
            }
            else{
                this.setState({
                    visible: true,
                    val:value,
                    // value,
                    searchSuggest:[]
                })
            }
        })
    };
    clear = () => {
        this.setState({ val: '' });
    };
    onSubmmit=(value)=>{
        if(!value)return
        this.props.history.push(`/Search/detail?keywords=${value}`)
        this.setState({
            visible: false,
        })
        let res=this.state.aarr.find(item=>item===value)
        if(res){
            return
        }
        this.state.aarr.push(value)
        console.log(this.state.aarr)
        localStorage.setItem('history',this.state.aarr)
        
    }
    // onFocus=(value)=>{
    //     this.setState({
    //         visible: true,
    //     })
    // }
    // onBlur=(value)=>{
    //     this.setState({
    //         visible: true,
    //     })
    // }
    onSelect = (opt) => {
        //console.log(opt.props.value);   //打印出当前选中的值
        this.setState({
        visible: false,
        selected: opt.props.value,
        });
    };
    handleVisibleChange = (visible) => {
            this.setState({
                visible,
            });
    };
    dianji(value){
        console.log(value)
        console.log(this.state.val)
        this.state.val=value
        console.log(this.state.val)
        this.setState({})
        
        this.props.history.push(`/Search/detail?keywords=${value}`)
    }
    dianjiSou(value){
        console.log(1111)
        console.log(value)
    }
    dianjiimg(){
        this.props.history.goBack();
        this.setState({
            val:'',
        })
    }
  render() {
    return (
        <div>
        <div className={Css.searchBar}>
            <img onClick={this.dianjiimg.bind(this)} src={fanhui} alt="" className={Css.imgee}/> 
            <SearchBar placeholder="Search" ref={ref => this.autoFocusInst = ref}//
                onSubmit={this.onSubmmit} 
                onClear={value => console.log(value, 'onClear')}    //点击x触发
                onFocus={() => console.log('onFocus')}
                onBlur={() => console.log('onBlur')}
                // onFocus={this.onFocus}
                // onBlur={this.onBlur}
                onCancel={() => console.log('onCancel')}    //点击取消按钮触发 (不再自动清除输入框的文字)
                showCancelButton       //是否一直显示取消按钮
                onChange={this.onChange}    //输入值触发
            />
            <WhiteSpace />
        </div>

        <div className={Css.show}>
            <NavBar
                mode="light"
                rightContent={
                <Popover  
                    visible={this.state.visible}    //显示或隐藏
                    overlay={[(
          
                    <Item  key="0" value="scan" data-seed="logId" className={Css.seh} onClick={this.dianjiSou.bind(this)}>搜索&nbsp;&nbsp;&nbsp;"{this.state.val}"</Item>),

                    this.state.searchSuggest.map((item,index)=>{
                        return( 
                            <div className={Css.itemlist} onClick={this.dianji.bind(this,item.keyword)}>
                            <Item key={index+1} value={item.keyword}>
                                <img src={sousuo} alt="" className={Css.imge} />
                               <span className={Css.geming}>{item.keyword}</span>
                            </Item>
                            </div>
                        )
                    }
                    )]}
                    onVisibleChange={this.handleVisibleChange}  //更改框框是否显示
                    onSelect={this.onSelect}  //点击传入当前的值
                >
                    {/* 显示。。。 */}
                    
                    <div className={Css.errordiv}>
                        {/* 11111111111111 */}
                    </div> 
                </Popover>
                }
            ></NavBar>
        </div>
        </div>
    )
}
}
// export default SearchBarExample

class CustomLink extends React.Component {
    render() {
        return (
            <Router>
                <Route path="/Findsong" component={Findsong}></Route>
                <Route path="/morevideo" component={Morevideo}></Route>
                {/*  */}
                <Route path="/Search" component={SearchBarExample}></Route>
                {/*  */}
                <Route path="/Search" exact component={Searchindex}></Route>
                {/*  */}
                <Route path="/Search/detail" component={Detail}></Route>
            </Router>
        )
    }
}
export default CustomLink